<template>
    <!-- 底部菜单部分 -->
            <ul class="footer">
                <li onclick="location.href='index.html'">
                    <i class="fa fa-home"></i>
                    <p style="text-indent:2em;">首页</p>
                </li>
                <li>
                    <i class="fa fa-compass"></i>
                    <p style="text-indent:2em;">发现</p>
                </li>
                <li onclick="location.href='orderList.html'">
                    <i class="fa fa-file-text-o"></i>
                    <p style="text-indent:2em;">订单</p>
                </li>
                <li>
                    <i class="fa fa-user-o"></i>
                    <p style="text-indent:2em;">我的</p>
                </li>
            </ul>
</template>

<script>

</script>

<style>
    /****************** 底部菜单部分 ******************/
.wrapper .footer{
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	background-color: #fff;
	
	position: fixed;
	left: 0;
	bottom: 0;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.wrapper .footer li{
	/*li本身的尺寸完全由内容撑起*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	color: #999;
	user-select: none;
	cursor: pointer;
}
.wrapper .footer li p{
	font-size: 2.8vw;
}
.wrapper .footer li i{
	font-size: 5vw;
}

</style>